<template>
    <require from="./em-chat-sidebar-left.css"></require>
    <div class="ui left visible sidebar tms-left-sidebar">
        <div class="tms-header">
            <h1 class="ui header"><img ref="logoRef" src="img/tms-x32.png" alt=""><a href="/admin">TMS沟通</a></h1>
            <input value.bind="filter" keyup.trigger="chatToUserFilerKeyupHanlder($event)" type="text" placeholder="过滤沟通频道|用户">
            <i show.bind="filter" title="清空过滤输入" click.delegate="clearFilterHandler()" class="close icon link"></i>
        </div>
        <div class="tms-body">
            <div scrollbar="scrollbar-macosx">
                <div ref="channelsRef" class="tms-channels">
                    <div class="title">
                        <h4 class="ui header"><i class="users icon"></i>频道 (${channels.length})</h4>
                        <i ref="createChannelRef" class="plus link circular icon"></i>
                    </div>
                    <div class="ui middle aligned selection list">
                        <a repeat.for="item of channels | sort:'title' | sortChannels" title="${item.title}(${item.name})" show.bind="!item.hidden" href="#/chat/${item.name}" class="item ${(!isAt && item.name == chatTo) ? 'active' : ''}">
                            <i class="hashtag icon"></i>
                            <div class="content">
                                <div class="tms-name">${item.title}</div>
                            </div>
                            <div class="actions">
                                <div if.bind="item.owner.username == loginUser.username" ui-dropdown class="ui right pointing dropdown">
                                    <i class="large ellipsis horizontal icon"></i>
                                    <div class="menu">
                                        <div class="item" click.delegate="membersMgrHandler(item)">成员管理</div>
                                        <div class="item" click.delegate="editHandler(item)">编辑</div>
                                        <div class="item" click.delegate="delHandler(item)">删除</div>
                                    </div>
                                </div>
                                <div if.bind="item.owner.username != loginUser.username" ui-dropdown class="ui right pointing dropdown">
                                    <i class="large ellipsis horizontal icon"></i>
                                    <div class="menu">
                                        <div class="item" click.delegate="membersShowHandler(item)">成员查看</div>
                                        <div class="item" click.delegate="leaveHandler(item)">离开</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="ui divider"></div>
                <div class="tms-users">
                    <div class="title">
                        <h4 class="ui header"><i class="user icon"></i>用户 (${users.length})</h4>
                        <!-- <i class="plus link circular icon"></i> -->
                    </div>
                    <div ref="userListRef" class="ui middle aligned selection list">
                        <a repeat.for="item of users | sortUsers:loginUser.username" title="${item.name}(@${item.username})" show.bind="!item.hidden" href="#/chat/@${item.username}" class="item ${(isAt && item.username == chatTo) ? 'active' : ''} ${!item.enabled ? 'disabled-user' : ''}" data-id="${item.username}">
                            <i style="font-weight: bold;" class="at icon"></i>
                            <div class="content">
                                <div class="tms-name">${item.name ? item.name : item.username} ${item.username == loginUser.username ? '(自己)' : ''}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tms-footer">
            <div class="ui inverted icon menu">
                <a target="_blank" href="#/blog" class="item"><i class="wikipedia icon"></i></a>
                <div click.delegate="switchHandler()" class="ui animated fade button item" tabindex="0">
                    <div class="visible content">
                        <i class="large icons">
                            <i class="align justify icon"></i>
                            <i class="corner search icon"></i>
                        </i>
                    </div>
                    <div class="hidden content">
                        CTRL+K 切换
                    </div>
                </div>
                <div class="right menu">
                    <div class="ui dropdown icon item" ui-dropdown>
                        <i class="content icon"></i>
                        <div class="menu">
                            <div class="header">
                                <i class="linkify icon"></i> 系统外链 <i if.bind="isSuper" click.trigger="addChannelLinkHandler($event)" title="添加系统外链" class="circular icon link plus"></i>
                            </div>
                            <div if.bind="!sysLinks || sysLinks.length == 0" class="item">暂无系统外链</div>
                            <a repeat.for="item of sysLinks | sort:'title'" target="_blank" href="${item.href}" class="item">${item.title}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <em-confirm-modal em-confirm-modal.ref="confirmMd"></em-confirm-modal>
    <em-chat-channel-create login-user.bind="loginUser" trigger.bind="createChannelRef"></em-chat-channel-create>
    <em-chat-channel-edit channel.bind="selectedChannel" em-chat-channel-edit.ref="channelEditMd"></em-chat-channel-edit>
    <em-chat-channel-members-mgr users.bind="users" channel.bind="selectedChannel" em-chat-channel-members-mgr.ref="channelMembersMgrMd"></em-chat-channel-members-mgr>
    <em-chat-channel-members-show channel.bind="selectedChannel" em-chat-channel-members-show.ref="channelMembersShowMd"></em-chat-channel-members-show>
    <em-chat-system-link-mgr view-model.ref="sysLinkMgrVm"></em-chat-system-link-mgr>
</template>
